<template>
  <el-dialog
    top="5vh"
    width="55%"
    title="详情"
    fullscreen
    append-to-body
    v-if="visible"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="handleEditReset"
  >
    <div class="dialog-content">
      <avue-form ref="editForm" :option="option" v-model="form">
        <template slot="planCode">
          <el-input placeholder="请输入编码" v-model="form.planCode" disabled> </el-input>
        </template>
        <template slot-scope="{}" slot="avueCurd">
          <div class="avue-crud">
            <avue-crud ref="editCrud" :option="tableOption" :data="form.qmsInspectionPlanObjectVOList"> </avue-crud>
          </div>
        </template>
        <template slot-scope="{}" slot="ruleControl">
          <label>备注：自动报检的触发时机在【参数管理】中进行配置</label>
        </template>
        <template slot-scope="{}" slot="omissionControl">
          <h3>1. 防漏检验控制：</h3>
          <div class="ml20">
            <el-radio v-model="form.missingInspectControl" :label="1" disabled>
              <el-tooltip content="在预警中心设置若待检单的未处理时长达到设定值时，则会预警消息通知！" placement="top">
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              允许生产，仅预警提示告知
            </el-radio>
            <span>备注：具体到预警中心设计</span>
          </div>
        </template>
      </avue-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" icon="el-icon-delete" @click="handleEditReset">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { guid } from '@/util/helpers';
import { getPlanConfigDetail } from '@/api/quality/palnConfig';

export default {
  name: 'viewProcessPlanConfig',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      option: {
        searchShow: true,
        searchMenuSpan: 6,
        menuPosition: 'right',
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 150,
        group: [
          {
            label: '基础信息',
            prop: 'equipmentInfo',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                label: '计划名称',
                prop: 'planName',
                disabled: true,
                span: 8,
                rules: [{ required: true, message: '请输入计划名称', trigger: 'blur' }]
              },
              {
                label: '计划编码',
                prop: 'planNo',
                disabled: true,
                formslot: true,
                span: 8
              },
              {
                label: '巡检类型',
                span: 6,
                prop: 'inspectSubType',
                labelTip: '具体到预警中心设计',
                type: 'select',
                disabled: true,
                dicUrl: '/api/blade-system/dict/dictionary?code=ipqc_type',
                rules: [{ required: true, message: '请选择巡检类型', trigger: 'change' }],
                props: {
                  label: 'dictValue',
                  value: 'dictKey'
                }
              }
            ]
          },
          {
            label: '巡检对象',
            prop: 'equipmentInfo1',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                prop: 'avueCurd',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              }
            ]
          },
          {
            label: '报检方式',
            prop: 'equipmentInfo2',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                label: '报检方式',
                prop: 'sendExamineType',
                dicData: [
                  { label: '自动', value: 'AUTO' },
                  { label: '手动', value: 'MANUAL' }
                ],
                multiple: true,
                span: 8,
                disabled: true,
                labelTip: '选择手动或自动后，则表示生成的待检单会受防呆规则内容的受控',
                type: 'select',
                rules: [{ required: true, message: '请选择报检方式', trigger: 'change' }]
              },
              {
                prop: 'ruleControl',
                labelWidth: 0,
                span: 8,
                formslot: true
              }
            ]
          },
          {
            label: '防呆规则',
            prop: 'equipmentInfo2',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                prop: 'omissionControl',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              }
            ]
          },
          {
            label: '关闭控制',
            prop: 'equipmentInfo4',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                label: '未检时间(min)',
                type: 'number',
                min: 0,
                precision: 0,
                prop: 'closeInspectDuration',
                labelWidth: 150,
                span: 10,
                disabled: true,
                labelTip: '待检单超过设定的未检时间时，则该待检单会强制关闭；状态由待检变为超期关闭',
                value: 4,
                rules: [{ required: true, message: '请输入未检时间', trigger: 'blur' }]
              }
            ]
          }
        ]
      },
      form: {},
      tableOption: {
        height: '400px',
        calcHeight: 30,
        tip: false,
        searchShow: false,
        filterBtn: false,
        refreshBtn: false,
        columnBtn: false,
        border: true,
        index: true,
        indexLabel: '序号',
        searchMenuSpan: 6,
        searchLabelWidth: 90,
        viewBtn: false,
        delBtn: true,
        editBtn: false,
        menu: false,
        addBtn: false,
        labelWidth: 130,
        selection: true,
        highlightCurrentRow: true, // 选中高亮
        dialogClickModal: false,
        searchMenuPosition: 'right',
        searchSpan: 6,
        column: [
          {
            label: '巡检类型',
            prop: 'inspectSubType',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=ipqc_type',
            rules: [{ required: true, message: '请选择巡检类型', trigger: 'change' }],
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            disabled: true
          },
          {
            label: '车间',
            prop: 'workshopName'
          },
          {
            label: '产线',
            prop: 'lineName'
          },
          {
            label: '巡检时段',
            prop: 'ipqcTimeframeId',
            type: 'select',
            props: {
              label: 'label',
              value: 'id'
            },
            span: 8,
            dicUrl: '/api/mes-product/qms-ipqc-timeframe/list',
            dicFormatter: (data) => {
              console.log(data);
              return data.data.map((item) => ({
                ...item,
                label: `${item.startTime}-${item.endTime}`
              }));
            },
            rules: [{ required: true, message: '请选择巡检时段', trigger: 'change' }]
          },
          {
            label: '备注',
            prop: 'remark',
            span: 24,
            type: 'textarea'
          }
        ]
      }
    };
  },
  methods: {
    async getDetail(id) {
      try {
        const res = await getPlanConfigDetail({ id: id });
        const data = res.data.data;
        const options = JSON.parse(data.options);
        delete data.options;
        const sendExamineType = data.sendExamineType ? data.sendExamineType.split(',') : [];
        this.form = {
          ...data,
          ...options,
          sendExamineType
        };
      } catch (e) {
        console.warn(e);
      }
    },
    handleEditReset() {
      this.$refs.editForm.resetForm();
      this.$emit('update:visible', false);
      this.$emit('closeDialog');
    },
    handleEditSubmit() {
      console.log(this.form);
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-content {
  height: calc(100vh - 180px);
  overflow-y: scroll;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 1s;
    z-index: 1;
    cursor: not-allowed;
  }
  h3 {
    margin: 0;
    font-size: 15px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .ml20 {
    margin-left: 20px;
  }
  .rules-container {
    display: flex;
    align-items: center;
    height: 32px;
  }
  .num-input-contain {
    color: #606266;
  }
  .input-width {
    width: 300px;
  }
}
.avue-crud {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 1s;
    z-index: 1;
    cursor: not-allowed;
  }
}
</style>
